<template>
  <div :class="{ 'p-3 gap-4': getLayout === 'loose' }" class="max-sm:p-0 flex-1 bg-pages rounded-tl-2xl flex pb-0">
    <splitpanes @resized="splitResize" :class="{ 'gap-1': getLayout === 'loose' }" class="default-theme pages-height">
      <pane :size="panesSize[0]">
        <DocumentList @change-section="changeSection" class="pages-height max-sm:hidden" />
      </pane>
      <pane :size="panesSize[1]">
        <div :class="{ 'rounded-xl': getLayout === 'loose' }"
          class="tiptap-container bg-rich-editor overflow-auto max-sm:w-full max-sm:h-full p-10 max-sm:px-5 border-border border-s-1"
          v-if="document[nowDocumentIndex].sections[nowSectionIndex!]">
          <UIRichEditor :fontSize="20" v-model="document[nowDocumentIndex].sections[nowSectionIndex!].title
            " placeholder="请输入标题..." class="title-input w-full bg-transparent outline-none" :disableEnter="true"
            ref="titleEditorRef" id="titleEditor" />
          <div class="divider mb-4"></div>
          <UIRichEditor ref="sectionEditorRef" id="sectionEditor" class="flex-1 flex pb-200" show-word-count
            placeholder="请输入内容..." v-model="document[nowDocumentIndex].sections[nowSectionIndex!].content
              " />
          <UIAISelectionBar />
        </div>
      </pane>
      <pane :size="panesSize[2]">
        <DocumentAIPanel class="pages-height" />
      </pane>
    </splitpanes>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import UIRichEditor from "@/components/UI/RichEditor/index.vue";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";

const { document, nowDocumentIndex, nowSectionIndex } =
  storeToRefs(documentStore());
const { getLayout, panesSize } = storeToRefs(settingsStore());
const { setPanesSize } = settingsStore();
const titleEditorRef = useTemplateRef("titleEditorRef");
const sectionEditorRef =
  useTemplateRef<InstanceType<typeof UIRichEditor>>("sectionEditorRef");
sectionEditorRef.value;
const changeSection = () => {
  titleEditorRef.value?.setContent(
    document.value[nowDocumentIndex.value].sections[nowSectionIndex.value!]
      .title ?? ""
  );
  sectionEditorRef.value?.setContent(
    document.value[nowDocumentIndex.value].sections[nowSectionIndex.value!]
      .content ?? ""
  );
};

useEditorAgent(sectionEditorRef as any);
const pageHeight = computed(() => {
  return getLayout.value === "loose" ? "100vh - 3.4rem" : "100vh - 2.6rem";
});
const splitResize = (resizeEvent: any) => {
  setPanesSize(resizeEvent.panes.map((item: any) => item.size))
};
</script>

<style>
.pages-height {
  height: calc(v-bind(pageHeight));
  overflow: hidden;
}

.tiptap-container {
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-paper);
  height: calc(v-bind(pageHeight));
}

@media (max-width: 640px) {
  .tiptap-container {
    height: calc(100vh - 2.6rem);
    border-radius: 0;
    box-shadow: none;
    padding-top: 0;
  }
}

.title-input {
  border: none;
  font-size: 20px;
}

.splitpanes__splitter {
  background: transparent !important;
  border: none !important;
  width: 2px !important;
}

.splitpanes__splitter::before {
  display: none !important;
}

.splitpanes__splitter::after {
  display: none !important;
}
</style>
